<template>
	<div id="recharge">
		<div class="recharge_area">
			<div class="title">
				{{basetitle}}
			</div>
			<div class="add_form">
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>{{title}}</span>
					</div>
					<div class="right_input">
						<el-input v-model="modelData.balance" placeholder="请填写金额"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left" @click="handleselect(1)">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>{{title1}}</span>
					</div>
					<div class="right_input trade_name">
						<el-select class="" v-model="modelData.userId" placeholder="请选择贸易商" @change="changeType(1)">
							<el-option v-for="item in companys" :key="item.id" :label="item.userName" :value="item.id">
								{{item.userName}}
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="form_item my-flex-left" @click="handleselect(2)">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>{{title2}}</span>
					</div>
					<div class="right_input pay_name">
						<el-select class="" v-model="modelData.bankId" placeholder="请选择银行卡" @change="changeType(2)">
							<el-option v-for="item in banks" :key="item.bankId" :label="item.name" :value="item.bankId">
								{{item.name}}
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input" @click="submit">
						<div class="infobtn my-flex-center">
							保存
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import $ from 'jquery';
	import service from '@/js/services/walletservice.js';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading', 'hasPermission'],

		data() {
			return {
				currrentId: 5,
				formVisible: false,
				basetitle: '充值',
				title: "充值金额",
				title1: '充值到',
				title2: '支付方式',
				modelData: {
					balance: null,
					userId: null,
					userName: '请选择贸易商',
					bankId: null,
					bankName: '请选择银行卡'
				},
				companys: [],
				banks: [],
				list: [],
				operatetype: 0, //1：充值 2：提现
				selecttype: 0
			}
		},
		mounted() {
			this.operatetype = this.$route.query.type;
			if(this.operatetype == 2) {
				this.basetitle = "提现";
				this.title = "提现金额";
				this.title1 = "提现账户";
				this.title2 = "提现到";
			}
			this.getmerchants(this.operatetype);
			this.getbanks();
		},
		methods: {
			...service,
			submit() {
				this.save();
			},
			handleselect(type) {
				if(type == 1) {
					this.selecttype = 1;
					//					this.list = this.companys;
				} else if(type == 2) {
					//					this.list = this.banks;
					this.selecttype = 2;
				}

			},
			changeType(type) {
				if(type == 1) {
					this.$nextTick(() => {
						this.modelData.userName = $('.trade_name input').val();

					})

				} else if(type == 2) {
					this.$nextTick(() => {
						this.modelData.bankName = $('.pay_name input').val();

					})
				}
			},
			handleChoose(item) {
				if(this.selecttype == 1) { //公司
					this.modelData.userId = item.id;
					this.modelData.userName = item.name;
				} else if(this.selecttype == 2) { //银行
					this.modelData.bankId = item.id;
					this.modelData.bankName = item.name;
				}
				this.formVisible = false;
			},
			handleSave() {
				service.save(this);
			}
		}
	}
</script>

<style lang="less" src="../../less/page/purse/index.less"></style>